﻿<template>
  <div>
    <el-dialog
      :title="$t('email.manageGroup')"
      :close-on-click-modal="false"
      :visible.sync="this.dialogVisible"
      :append-to-body="true"
      @open="getInit"
      height="700"
      :before-close="handleClose"
      style="padding-top: unset"
    >
      <div ref="filter" class="filter-container" style="margin-bottom: unset">
        <template>
          <el-input
            v-model="listQuery.name"
            size="mini"
            :placeholder="$t('common.enter', [$t('customer.groupName')])"
            style="width: 200px"
            class="filter-item filter-left"
            clearable
          />
          <el-button
            size="mini"
            class="filter-item filter-left"
            icon="el-icon-search"
            type="primary"
            style="margin-left: 5px"
            plain
            @click="search()"
          >
            {{ $t('common.search') }}
          </el-button>
          <el-button
            size="mini"
            class="filter-item filter-left"
            type="success"
            style="margin-left: 5px"
            plain
            @click="handleAddNewGroup"
            >{{ $t('customer.addGroup') }}</el-button
          >
          <!-- <el-button size="mini" class="filter-item filter-left" type="success" style="margin-left:5px" plain @click="handleChangeGroup">批量分组</el-button> -->

          <el-button
            size="mini"
            class="filter-item right filter-left filter-refresh"
            icon="el-icon-refresh"
            type="primary"
            plain
            @click="refresh()"
          />
        </template>
      </div>
      <el-table
        :data="tableData"
        v-loading="listLoading"
        @selection-change="handleSelection"
        border
        style="width: 100%"
      >
        <!-- <el-table-column
            align="center"
            type="selection"
            width="55">
          </el-table-column> -->
        <el-table-column
          align="center"
          type="index"
          :label="$t('common.id')"
          width="55"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          :label="$t('customer.groupName')"
          min-width="180"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="createdAt"
          :label="$t('common.createTime')"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          :label="$t('common.actions')"
          min-width="100"
        >
          <template slot-scope="scope">
            <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> -->
            <el-button
              type="text"
              size="small"
              @click="changeGroup(scope.row.id)"
              disabled
              >{{ $t('common.edit') }}</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleDelete(scope.row.id)"
              disabled
              >{{ $t('common.delete') }}</el-button
            >
            <!-- <el-button type="text" size="small" @click="changeGroup(scope.row.id)" disabled>重新验证</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div style="height: 50px">
        <add-group :show.sync="showAddGroupVisible" @closeAction="refresh" />
        <pagination
          v-show="listQuery.total > 0"
          :total="listQuery.total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
          @pagination="getList()"
        />
      </div>
    </el-dialog>
    <!-- <change-group :id="collectId" :show.sync="showDealState" @closeAction="refresh"/> -->
  </div>
</template>

<script>
import {
  getAction,
  postAction,
  getUrlAction,
  postUrlAction,
} from '@/api/common'
import AddGroup from './addGroup.vue'
import Pagination from '@/components/Pagination/index.vue'

export default {
  name: 'ManageGroup',
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    AddGroup,
    Pagination,
  },
  created() {
    this.getList()
  },
  watch: {
    show() {
      this.dialogVisible = this.show
    },
  },
  data: function () {
    return {
      /// /////////////////////////////////////////////////////////////////////////////////
      listQuery: {
        total: 0,
        page: 0,
        limit: 10,
        name: undefined,
      },
      options: [],
      selection: [],
      changeGroupIds: [],
      dialogVisible: this.show,
      listLoading: false,
      /// /////////////////////////////////////////////////////////////////////////////////
      emailGroupOptions: [],
      showAddGroupVisible: false,
      tableData: [],
    }
  },
  methods: {
    search() {
      this.getList()
    },
    refresh() {
      console.log('刷新啦1')
      this.listQuery = {
        total: 0,
        page: 0,
        limit: 10,
        name: undefined,
      }
      this.getInit()
      console.log('刷新啦2')
    },
    /// /////////////////////////////////////////////////////////////////////////////////
    handleAddNewGroup() {
      this.showAddGroupVisible = true
      console.log('添加新分组')
    },
    handleDelete() {
      console.log('删除分组')
    },
    handleSelection(val) {
      this.selection = val
    },
    /// /////////////////////////////////////////////////////////////////////////////////
    handleClick(row) {
      console.log(row)
    },
    getInit() {
      this.listLoading = true
      this.getGroupOptions()
      this.getList()
      this.listLoading = false
    },
    getList() {
      getAction(this.listQuery, 'EmailConfigGroup/Index').then((res) => {
        this.tableData = res.data.items
        this.listQuery.total = res.data.total
      })
    },
    getGroupOptions() {
      getAction({}, 'EmailConfigGroup/GetGroupList').then((res) => {
        this.options = res.data
        this.options.push({ label: this.$t('email.noGroup'), value: 0 })
      })
    },
    handleClose() {
      this.$emit('update:show', false)
    },
    changeGroup(id) {
      this.showChangeGroupVisible = true
      console.log('changeGroup')
    },
  },
}
</script>

<style></style>
